<template>
  <el-card class="dashboard-card" :style="{ borderLeft: `4px solid ${color}` }">
    <div class="card-content">
      <!-- 左侧数据区块 -->
      <div class="data-section">
        <div class="title">{{ title }}</div>
        <div class="value">{{ formattedValue }}<span v-if="unit" class="unit">{{ unit }}</span></div>
        <div v-if="trend" class="trend" :class="trendType">
          <el-icon :size="14">
            <CaretTop v-if="trendType === 'positive'" />
            <CaretBottom v-else />
          </el-icon>
          {{ trend }}
        </div>
      </div>

      <!-- 右侧图标区块 -->
      <div class="icon-section" :style="{ backgroundColor: `${color}20` }">
        <el-icon :color="color" :size="32">
          <component :is="iconComponent" />
        </el-icon>
      </div>
    </div>
  </el-card>
</template>

<script setup>
import {defineProps, computed} from 'vue'

const props = defineProps({
  title: {type: String, required: true},      // 卡片标题
  value: {type: [Number, String], required: true}, // 核心数值
  unit: {type: String, default: ''},         // 数值单位
  icon: {type: String, required: true},      // 图标类型
  color: {type: String, default: '#409EFF'}, // 主题色
  trend: {type: String, default: ''},         // 趋势值（如+12%）
  precision: {type: Number, default: 1}       // 小数位精度
})

// 动态图标组件
const iconComponent = computed(() => {
  const iconMap = {
    user: 'User',
    document: 'Document',
    clock: 'Clock',
    chart: 'PieChart'
  }
  return iconMap[props.icon] || 'QuestionFilled'
})

// 格式化显示数值
const formattedValue = computed(() => {
  if (typeof props.value === 'number') {
    return props.value.toFixed(props.precision)
  }
  return props.value
})

// 趋势类型判断
const trendType = computed(() => {
  return props.trend.includes('+') ? 'positive' : 'negative'
})
</script>

<style scoped>
.dashboard-card {
  margin-bottom: 20px;
  transition: transform 0.3s, box-shadow 0.3s;

  &:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  }
}

.card-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;

  .data-section {
    flex: 1;

    .title {
      color: #606266;
      font-size: 14px;
      margin-bottom: 8px;
    }

    .value {
      font-size: 24px;
      font-weight: 600;
      color: #303133;

      .unit {
        font-size: 14px;
        color: #909399;
        margin-left: 4px;
      }
    }

    .trend {
      font-size: 12px;
      margin-top: 8px;

      &.positive {
        color: #67C23A;
      }

      &.negative {
        color: #F56C6C;
      }

      .el-icon {
        vertical-align: -2px;
      }
    }
  }

  .icon-section {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 16px;
  }
}
</style>
